<template>
  <div>
    <div class="section b-cells">
      <div class="section-header">
        <div class="section-mark" style="border-left-color: rgb(35, 98, 251);"></div>
        <div class="section-title">基本信息</div>
      </div>
      <div class="content" style="height: auto;"><!---->
        <el-form ref="form" label-width="100px" label-position="left">
          <div style="display: flex">
            <el-form-item label="客户名称">
              <span>{{row.name}}</span>
            </el-form-item>
            <el-form-item label="公司电话">
              <span>{{row.companyTel ? row.companyTel : '无'}}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="职称">
              <span>{{row.jobTitle ? row.jobTitle : '无'}}</span>
            </el-form-item>
            <el-form-item label="领英网址">
              <span>{{row.linkedinUrl ? row.linkedinUrl : '无'}}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="手机">
              <span>{{row.mobile ? row.mobile : '无'}}</span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span>{{row.email}}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="客户类型">
              <span>{{getType(row.type)}}</span>
            </el-form-item>
            <el-form-item label="客户分组">
              <span>{{row.groupId ? row.group.name : '未分组'}}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="客户来源">
              <span>{{row.source ? row.source.name : '无'}}</span>
            </el-form-item>
            <el-form-item label="标签">
              <template v-if="JSON.stringify(row.labels) != '[]'">
                <template v-for="(v,k) in row.labels">
                  <el-tag
                    :style="{'background-color':v.color,'border-color':v.color,'margin-right':'5px'}"
                    size="mini"
                    effect="dark">
                    {{ v.name }}
                  </el-tag>
                </template>
              </template>
              <template v-else>无</template>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="备注">
              <span>{{row.remarks ? row.remarks : '无'}}</span>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="section-header">
        <div class="section-mark" style="border-left-color: rgb(35, 98, 251);"></div>
        <div class="section-title">系统信息</div>
      </div>
      <div class="content" style="height: auto;">
        <el-form ref="form" label-width="100px" label-position="left">
          <div style="display: flex">
            <el-form-item label="负责人">
              <span>{{row.belongUser ? row.belongUser.trueName : '无'}}</span>
            </el-form-item>
            <el-form-item label="最后跟进记录">
              <span style="word-wrap:break-word;word-break:break-all;">{{row.followMessage ? row.followMessage : '无'
                }}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="创建人">
              <span>{{row.user ? row.user.trueName : '无'}}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{row.createdAt}}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="更新时间">
              <span>{{row.updatedAt}}</span>
            </el-form-item>
            <el-form-item label="最后跟进时间">
              <span>{{row.followAt ? row.followAt : '无'}}</span>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="负责人获取客户时间">
              <span>{{row.belongAt}}</span>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "info",
  props: {
    row: '',
  },
  methods: {
    getType(type) {
      let arr = [
        '', '全球搜索', '数据营销', '外部导入',
      ]
      return arr[type];
    }
  }
}
</script>

<style scoped>
.b-cells {
  position: relative;
  padding: 15px;
  height: 100%;
  overflow-y: auto;
  overflow-y: overlay;
}

.section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 15px;
}

.section-mark {
  border-left-width: 4px;
  border-left-style: solid;
  height: 14px;
  border-radius: 2px;
}

.section-title {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  margin-left: 8px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.content /deep/ .el-form {
  margin: 5px 25px 0;
}

.content /deep/ .el-form-item__label {
  color: #777;
}

.content /deep/ .el-form-item {
  width: 50%;
}

.content /deep/ .el-form {
}
</style>
